<!-- src/components/SkuSelector.vue -->
<script setup>
import { ref, onMounted, watch } from 'vue'
import { getSkuDtoListApi } from '@/api/sku'
import { ElMessage } from 'element-plus'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:visible', 'confirm'])

const skuList = ref([])
const selectedSkus = ref([])
const loading = ref(false)
const pagination = ref({
  page: 1,
  pageSize: 10,
  total: 0
})
const searchForm = ref({
  title: '',
  code: ''
})

// 获取SKU列表
const getSkuList = async () => {
  loading.value = true
  try {
    const res = await getSkuDtoListApi(
      pagination.value.page,
      pagination.value.pageSize,
      searchForm.value.title,
      searchForm.value.code
    )
    skuList.value = res.data.rows
    pagination.value.total = res.data.total
  } catch (error) {
    ElMessage.error('获取SKU列表失败')
  } finally {
    loading.value = false
  }
}

// 搜索
const handleSearch = () => {
  pagination.value.page = 1
  getSkuList()
}

// 重置搜索
const handleReset = () => {
  searchForm.value = {
    title: '',
    code: ''
  }
  pagination.value.page = 1
  getSkuList()
}

// 分页变化
const handlePageChange = (page) => {
  pagination.value.page = page
  getSkuList()
}

// 确认选择
const handleConfirm = () => {
  if (selectedSkus.value.length === 0) {
    ElMessage.warning('请至少选择一个商品')
    return
  }
  emit('confirm', selectedSkus.value)
  handleClose()
}

// 关闭弹框
const handleClose = () => {
  emit('update:visible', false)
  selectedSkus.value = []
}

// 监听visible变化
watch(() => props.visible, (newVal) => {
  if (newVal) {
    getSkuList()
  }
})

onMounted(() => {
  if (props.visible) {
    getSkuList()
  }
})
</script>

<template>
  <el-dialog
    title="选择商品"
    :model-value="visible"
    @close="handleClose"
    width="800px"
  >
    <!-- 搜索区域 -->
    <el-form :model="searchForm" inline>
      <el-form-item label="商品名称">
        <el-input v-model="searchForm.title" placeholder="请输入商品名称" />
      </el-form-item>
      <el-form-item label="商品编码">
        <el-input v-model="searchForm.code" placeholder="请输入商品编码" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">搜索</el-button>
        <el-button @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- SKU列表 -->
    <el-table
      :data="skuList"
      v-loading="loading"
      row-key="id"
      @selection-change="selectedSkus = $event"
      height="400"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="code" label="商品编码" />
      <el-table-column prop="title" label="商品名称" />
      <el-table-column prop="supplierName" label="供应商" />
    </el-table>

    <!-- 分页 -->
    <el-pagination
      layout="prev, pager, next, jumper, ->, total"
      :current-page="pagination.page"
      :page-size="pagination.pageSize"
      :total="pagination.total"
      @current-change="handlePageChange"
      style="margin-top: 15px; text-align: right;"
    />

    <!-- 底部按钮 -->
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped>
.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
</style>